<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">


  <link href="{{env('CDN_RESOURCE')}}/css/levelIntro/phone.css" rel="stylesheet" type="text/css">
  <script src="{{env('CDN_RESOURCE')}}/js/jquery-2.1.4.min.js"></script>
  {{--<script type="text/javascript" src={{ asset("js/touchSwipe.min.js")}}></script>--}}

  <link rel="shortcut icon" type="image/x-icon" href="../icon/icon_web.png"/>

  {{--<meta name="viewport" content="width=device-width, initial-scale=1">--}}
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  <title>课程介绍</title>
</head>
<body>


<div class="wrap" id="wrap">

  <img class="header-img" src="">

  <div class="page-content">
    <div class="preview section">
      <div class="menu-icon icon"></div>
      <div class="header"> 内容导览 Preview</div>
      <div class="age content">

        <div class="title">
          <div class="age-icon"></div>
          适用年龄:
        </div>
        <span class="num"></span>
      </div>

      <div id="material" class="material content">

        <div class="title">
          <div class="material-icon"></div>
          对应等级:
        </div>
        <ul class="material-list">
        </ul>
      </div>

      <div class="brief content">

      </div>

    </div>

    <img class="intro-img" src="">

    <div class="objects section">
      <div class="goal-icon icon"></div>
      <div class="header">学习目标 Learning Objects</div>

      <div class="object-item" style="border-bottom: none;">
        <div class="title">主题</div>
        <ul class="content scenario-list">

        </ul>
      </div>

      <div class="object-item" style="border-bottom: none;">
        <div class="title" id="vocab-senten">词汇/典型例句</div>
        <div class="content  vocab-senten">
        </div>
      </div>

    </div>
  </div>


  <div class="section unit-detail">
    <div style="width:90%;margin:0 auto;">
      <div class="flag-icon icon"></div>
      <div class="header">单元介绍 Introduction by Unit</div>
    </div>

    <div class="unit-list">

      <div class="unit-slide-list" id="unitSlideList"></div>
      <div class="u-nav-cursor" id="unavCursor"></div>
    </div>


  </div>
</div>
</body>
</html>
<script type="text/javascript">

  $(document).ready(function () {

    var currentUnit = 1
    var previousUnit = 1
    var offset = 3
    $('#left').hide()

    var requestUrlArray = window.location.href.split('/')
    var requesCourseId = requestUrlArray[requestUrlArray.length - 1]

    //level 基本信息
    $.getJSON('/levelIntroductionJson/courseIntroduction.json', function (data) {
      var courseInfo = data['course' + requesCourseId]
      $('.num').text(courseInfo.preview.age)
      courseInfo.preview.material.forEach(function (data) {
        if (data !== '') {
          $('.material-list').append('<li class="item"> <span></span>' + data + '</li>')
        } else {
          $('.material-list').append('<li class="item" style="display:none"> <span></span>' + data + '</li>')
        }
      })

      courseInfo.preview.brief.forEach(function (data) {
        $('.brief').append('<p class="item">' + data + '</p>')

      })

      $('.header-img').attr('src', courseInfo.levelImage)
      $('.intro-img').attr('src', courseInfo.image)

      courseInfo.objects.scenario.forEach(function (data) {
        $('.scenario-list').append('<li class="item">' + data + '</li>')
      })

      courseInfo.objects.vs.forEach(function (data) {
        $('.vocab-senten').append('<span class="item">' + data + '</span>')
      })

    })

    //level unit 课程信息
    $.getJSON('/levelIntroductionJson/course' + requesCourseId + '.json', function (data) {
      var courseDetail = data
      courseDetail.chapters.forEach(function (data, key) {
        var html = ''

        if (key === 0) {
          html += '<div class="unit active-unit">'
          $('.unit-slide-list').append('<span class="select" id="firstUnit">Unit ' + (key + 1) + '</span>')
        } else {
          html += '<div class="unit">'
          $('.unit-slide-list').append('<span>Unit ' + (key + 1) + '</span>')
        }

        html += '<div class="object">' +
          '<span class="title">' + ($.trim(data.name) !== '' ? data.name + ': ' : '') + '</span>' +
          '<span class="item">' + data.description + '</span>' +
          '</div>' +

          '<table class="unit-content">'

        data.lessons.forEach(function (unitDetail) {
          var sentence = unitDetail.sentence === '' || unitDetail.sentence === null ? '' : unitDetail.sentence.replace(/\n/g, '<br>')
          html += '<tr class="color-tr">' +
            '<td>lesson  <span>' + (unitDetail.name || '') + '</span></td>' +
            '</tr>' +
            '<tr >' +
            '<td>' +
            '<div class="short">' +
            '<span>学习目标</span>' +
            '</div>' +
            '<div class="long">' +
            '<span class="item">' + (unitDetail.descriptionCN || '') + '</span>' +
            '</div>' +
            '</td>' +
            '</tr>' +

            '<tr>' +
            '<td>' +
            '<div class="short">词汇</div>' +
            '<div class="long">' +
            '<span class="item">' + (unitDetail.vocabulary || '') + '</span>' +
            '</div>' +
            '</td>' +
            '</tr>' +

            '<tr>' +
            '<td>' +
            '<div class="short">句型</div>' +
            '<div class="long">' +
            '<span class="item">' + (sentence || '') + '</span>' +

            '</div>' +
            '</td>' +
            '</tr>'
        })
        html += '</table></div>'
        $('.unit-detail').append(html)
      })

      $('.unit-slide-list span').click(function () {

        var nav = $(this)
        previousUnit = currentUnit
        currentUnit = $(this).index() + 1

        nav.fadeOut(125).addClass('select').fadeIn(125).siblings('span').removeClass('select')
        if (offset === currentUnit && (currentUnit !== 6)) {
          offset++
          $('#unitSlideList').animate({
            left: -$('#firstUnit').width() * (offset - 3)
          }, 250)

          if (previousUnit === (currentUnit - 2)) {
            $('#unavCursor').animate({
              left: $('#firstUnit').width()
            }, 250, function () {
            })
          }

        } else if ((offset - 2) === currentUnit && (currentUnit !== 1)) {
          offset--
          $('#unitSlideList').animate({
            left: -$('#firstUnit').width() * (offset - 3)
          }, 250)

          if (previousUnit === (currentUnit + 2)) {
            $('#unavCursor').animate({
              left: $('#firstUnit').width()
            }, 250, function () {
            })
          }

        } else {
          $('#unavCursor').animate({
            left: nav.offset().left - 20
          }, 250, function () {
          })
        }
        $('.unit').eq(currentUnit - 1).addClass('active-unit').siblings('.unit').removeClass('active-unit')

      })

      if (data.seriesId === 3) {
        $('#material').hide()
        $('#vocab-senten').text('高频词句')
      }

    })

  })
</script>

